import React, { Component } from 'react'
import Header from '../../Common/Header'
import { connect } from 'react-redux';
import { scdz_action, bjdz_action } from '../../../store/store';
import { Toast, Modal } from 'antd-mobile';
// import { Toast, Modal } from 'antd-mobile';

class Xgdz extends Component {
    constructor() {
        super();
        this.state = {
            oIndex: 1,
            lxr: '',
            dh: '',
            dz: '',
            mph: '',
            id: 0,
        }
    }
    scclick = (i) => {
        this.setState({
            oIndex: i
        })
    }
    bcclick = (i) => {
        this.setState({
            oIndex: i
        })
    }
    componentDidMount() {
        this.setState({
            id: this.props.history.location.state.id
        })
    }
    render() {
        let xgdz = this.props.history.location.state;
        return (
            <div className="xgdz">
                <Header title="修改地址" back={<span onClick={() => { this.props.history.push({ pathname: '/shdz' }) }}>&lt;</span>}></Header>
                <div className="content">
                    <div className="lxr">联系人：<input type="text" placeholder={xgdz.lxr}
                        onChange={(e) => { this.setState({ lxr: e.target.value }) }} />
                    </div>
                    <div className="dh">电话：<input type="text" placeholder={xgdz.dh}
                        onChange={(e) => { this.setState({ dh: e.target.value }) }} />
                    </div>
                    <div className="dz">地址：<input type="text" placeholder={xgdz.dz}
                        onChange={(e) => { this.setState({ dz: e.target.value }) }} />
                    </div>
                    <div className="mph">门牌号：<input type="text" placeholder={xgdz.mph}
                        onChange={(e) => { this.setState({ mph: e.target.value }) }} />
                    </div>
                    <div className="bcbsy">
                        <span className={this.state.oIndex === 0 ? 'acc' : ''} onClick={() => {
                            this.scclick(0);
                            Modal.alert('提示', '确定要删除吗', [
                                {
                                    text: '确定', onPress: () => {
                                        this.props.remdz(xgdz); Toast.success('删除成功', 1, null, false); this.props.history.push({ pathname: '/shdz' })
                                    }
                                }, {
                                    text: '取消', onPress: () => {
                                        Toast.success('已取消删除', 1, null, false)
                                    }
                                }]);
                        }}>删除</span>
                        <span className={this.state.oIndex === 1 ? 'acc' : ''} onClick={() => {
                            this.bcclick(1);
                            if (this.state.mph && this.state.dz && this.state.dh && this.state.lxr) {
                                this.props.bjdz(this.state); this.props.history.push({ pathname: '/shdz' })
                            } else {
                                Toast.success('内容不能为空', 1)
                            }
                        }
                        }>保存</span>
                    </div>
                </div>
                Xzdz
            </div>
        )
    }
}
export default connect(
    (state) => {
        return {
            adddz: state.adddz
        }
    },
    (dispatch) => {
        return {
            remdz: (item) => { dispatch(scdz_action(item)) },
            bjdz: (item) => { dispatch(bjdz_action(item)) }
        }
    }
)(Xgdz)